动态创建DOM元素的三种方式

document.write(); 不常用，因为容易覆盖原来的页面。

innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点)

document.createElement(); 用得也比较多，指定数量的时候一般用它。

1、方式一：

这种方式的好处是：比较随意，想创建就创建，可以直接在write里写属性都行。但是会把原来的标签给覆盖掉。所以不建议。

举例：

效果如下：

**方式二：**innerHTML

举例如下：

注意，上方代码中，是用是用符号+=，不是=，前者是在原来的基础之上增加，后者是替换。

效果如下：

**3、方式三：**利用DOM的api创建

利用DOM的api创建节点，有很多种：

比如：

createElement()

appendChild()

removeChild()

insertBefore()

replaceChild()

这个我们在上一篇文章的DOM节点的操作这一段中已经讲到了。

现在要做下面这样一个页面：

上图的意思是，每次刷新页面，都从服务器获取最新的在线人数的名单（我们先用本地的数组来模拟服务器上的数据）。

它的结构是：div > ul > li。每一个li就是一个头像。

如果在本地直接添加几个头像的话，代码是：

上方代码有两点比较重要：

我们是通过ul.innerHTML += 元素节点的方式来不停地往ul里面加内容，比createElement的方式要方便。

元素的内容本身有双引号"，所以我们要用单引号'进行字符串的连接。

但是，当我们从服务器获取在线用户的时候，头像和用户的昵称是动态变化的，所以每个字符串要用变量进行表示：

这里我们暂时用本地的数组来代表服务器的数据，最终的完整版代码如下：

方式1：

方式2：

rows (只读，table和textarea能用)

insertRow() (只有table能调用)

deleteRow() (只有table能调用)

cells (只读，table和textarea能用)

insertCell() (只有tr能调用)

deleteCell() (只有tr能调用)

PS：括号里可以带index。用的不多。

setInterval()：循环定时器。周而复始的执行（循环执行）

setTimeout()：定时炸弹。用完以后立刻报废（只执行一次）

**方式一：**匿名函数

每间隔一秒打印一次：

方式二：

每间隔一秒打印一次：

定时器的返回值可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是参数1，那么clearInterval(参数1)就可以清除定时器。

setTimeout()的道理是一样的。

代码举例：

假设网页两侧的广告栏为两个img标签，它们的样式为：

5秒后关闭广告栏的js代码为：

我们在之前的文章中做过这道题。但是现在，要求广告栏在关闭的时候，带动画效果：点击关闭按钮后，顶部广告栏慢慢地变透明，直到全部关闭。

我们可以用定时器来做。完整版代码如下：